<template>
	<view class="withdrawal-record-wrapper">
		<u-sticky offset-top="0"> 
			<view class="" style="background-color: #fff;">
				<u-tabs :list="tabsList" lineColor="#eb5480" :activeStyle="{ color: '#eb5480', }" :scrollable="false" @click="tabsClick"></u-tabs>
			</view>
		</u-sticky>
		
		<view class="withdrawal-record-list">
			<view class="withdrawal-record-item mg24 conteainer-public-style" v-for="w of withdrawalRecordList" :key="w.id">
				<view class="withdrawal-info flex-c">
					<text class="color666 fz26">状态</text>
					<view class="">
						<uni-tag v-if="w.status === 4" text="已完成" type="success" />
						<uni-tag v-if="w.status === 3" text="已拒绝" type="error" />
						<uni-tag v-if="w.status === 2" text="已取消" />
						<uni-tag v-if="w.status === 1" text="已申请" type="warning" />
					</view>
				</view>
				<view class="withdrawal-info flex-c">
					<text class="color666 fz26">持卡人</text>
					<text class="fz26">{{ w.cardholder }}</text>
				</view>
				<view class="withdrawal-info flex-c">
					<text class="color666 fz26">银行</text>
					<text class="fz26">{{ w.bank }}</text>
				</view>
				<view class="withdrawal-info flex-c">
					<text class="color666 fz26">卡号</text>
					<text class="fz26">{{ w.bankCardNumber }}</text>
				</view>
				<view class="withdrawal-info flex-c">
					<text class="color666 fz26">开户行</text>
					<text class="fz26">{{ w.bankOfDeposit }}</text>
				</view>
				<view class="withdrawal-info flex-c">
					<text class="color666 fz26">金额</text>
					<text class="fz26">￥ {{ w.balance || 0 }}</text>
				</view>
				<view class="withdrawal-info flex-c">
					<text class="color666 fz26">申请日期</text>
					<text class="fz26">{{ w.created_at }}</text>
				</view>
			</view>
		</view>
		<u-loadmore v-show="withdrawalRecordList.length" :status="loadStatus" />
		<NotData v-show="!withdrawalRecordList.length" msg="该状态无记录" />
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, computed, toRefs } from 'vue'
import { onReady, onReachBottom } from '@dcloudio/uni-app' 
import { queryWithdrawalList } from '@/http/my'

import NotData from '@/components/NoData.vue'

import type { IWithdrawalRecord } from '@/types'

export default defineComponent({
	components: { NotData },
	setup() { 
		const state = reactive({
			page: 1,
			pageSize: 10,
			status: 1,
			total: 0,
			tabsList: [
				{name: '已申请', id: 1},
				// {name: '已取消', id: 2},
				{name: '已完成', id: 4}, 
				{name: '已拒绝', id: 3},
				
			],
			withdrawalRecordList: [] as Array<IWithdrawalRecord>,
			loadStatus: 'loading' as 'loading' | 'nomore'
		})
		
		onReady(() => {
			getWithdrawalList()
		}) 
		
		onReachBottom(() => { // 页面触底事件
			if(state.total === 0) return;
			if(state.total === state.withdrawalRecordList.length) return;
			state.page ++
			getWithdrawalList()  
		})
		
		const getWithdrawalList = async (): Promise<void> => { // 提现记录
			uni.showLoading({ title: '加载中' })
			let res = await queryWithdrawalList({
				page: state.page,
				pageSize: state.pageSize,
				status: state.status
			})
			if(res.code === 0) {
				state.withdrawalRecordList = [...state.withdrawalRecordList, ...(res.data?.list || [])]
				state.total = res.data?.total
				if(state.withdrawalRecordList.length === state.total) {
					state.loadStatus = 'nomore'
				} else {
					state.loadStatus = 'loading'
				}
			} else {
				uni.showToast({
					title: res.meg || '请求出错',
					icon: 'none'
				})
			}
			uni.hideLoading()
		}
		
		const tabsClick = (event: any) => {
			state.status = event.id as number
			state.withdrawalRecordList = []
			state.page = 1
			getWithdrawalList()
		}
		
		return {
			tabsClick,
			...toRefs(state)
		}
	}
})
</script>

<style>
	page{ background: #f8f8fa; }
</style>
<style scoped lang="scss">
.withdrawal-record-wrapper{
	padding-bottom: 20rpx;
	.withdrawal-record-list{
		.withdrawal-record-item{
			.withdrawal-info{
				margin-bottom: 24rpx;
				.color666{
					width: 180rpx;
				}
				&:last-child{
					margin-bottom: 0rpx;
				}
			}
		}
	}
}
</style>